<template>
  <div :style='{height: parentHeight, overflow: "hidden"}'>
    <!-- 搜索栏 -->
    <search @get-height="handleGetHeight" />
    <!-- 轮播图 -->
    <swiper indicator-dots>
      <swiper-item :key="item.goods_id" v-for="item in swiperData">
		 <image :src='item.image_src'></image>
	  </swiper-item>
    </swiper>
    <!-- 导航菜单 -->
   <div class="navs">
			<navigator url='' :key='index' v-for='(item, index) in menuData'>
        <image :src="item.image_src"></image>
      </navigator>
		</div>
		<!-- 商品楼层 -->
		<div class="floors">
			<div class="floor" :key='index' v-for='(item, index) in floorData'>
				<!-- 顶部的标题 -->
				<div class="title">
					<image :src='item.floor_title.image_src'/>
				</div>
				<!-- 底部的图片 -->
				<view class="items">
		      <navigator url='' :key='i' v-for='(pic, i) in item.product_list'>
		        <image :src="pic.image_src"></image>
		      </navigator>
		    </view>
			</div>
		</div>	
		<!-- 回顶部 -->
		<div class="goTop" v-show='isShow' @click='handleTop'>
			︿
		</div>
  </div>
</template>
<script>
import Search from "@/components/search/index";
export default {
  data() {
    return {
	  parentHeight: "auto",
	  swiperData: [],
	  menuData: [],
	  floorData: [],
	  title: '主页',
      isShow: false
    };
  },
  components: {
    Search,
  },
  onLoad() {
    //轮播图
	this.loadSwiperData()
    //导航菜单
	this.loadMenuData()
	//商品楼层
	this.loadFloorData()
  },
  methods: {
    handleGetHeight(height) {
      // 设置父容器的高度
      this.parentHeight = height === "auto" ? height : height + "px";
    },
    async loadSwiperData() {
      const data = await this.$request('home/swiperdata')
      if (data.meta.status === 200) {
      	this.swiperData = data.message
      } else {
      	uni.showToast(data.meta.msg)
      }
	},
	async loadMenuData () {
				const data = await this.$request('home/catitems')
				if (data.meta.status === 200) {
					this.menuData = data.message
				} else {
					uni.showToast(data.meta.msg)
				}
			},
	async loadFloorData () {
				const data = await this.$request('home/floordata')
				if (data.meta.status === 200) {
					this.floorData = data.message
				} else {
					uni.showToast(data.meta.msg)
				}
			}
        },
  handleTop () {
				// 控制页面回到顶部
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
};
</script>
<style lang="less">
.input-box {
  background-color: #eb4450;
  padding: 20rpx;
  input {
    background-color: #fff;
  }
}

swiper {
  width: 750rpx;
  height: 340rpx;
  image {
    width: 750rpx;
    height: 340rpx;
  }
}

.navs {
  display: flex;
  padding: 24rpx;
  navigator {
    flex: 1;
    width: 128rpx;
    height: 140rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

.floors {
  .floor {
    .title {
      width: 750rpx;
      height: 60rpx;
      padding: 20rpx 0 0 10rpx;
      box-sizing: border-box;
      background-color: #f4f4f4;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .items {
      padding: 20rpx 16rpx;
      overflow: hidden;
      navigator {
        float: left;
        margin-left: 10rpx;
        &:first-child {
          width: 232rpx;
          height: 386rpx;
          margin-left: 0;
        }
        &:nth-child(2),
        &:nth-child(5) {
          width: 273rpx;
          height: 188rpx;
        }
        &:nth-child(3),
        &:nth-child(4) {
          width: 193rpx;
          height: 188rpx;
        }
        &:nth-last-child(-n + 2) {
          margin-top: 10rpx;
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
